import {useState, useEffect} from 'react';
import {Select, message} from 'antd'
import {getDuration} from '@/services/package'

const SelectDuration = (props: any) => {
  const {onChange} = props
  const [list, setList] = useState([]);
  const [value, setValue] = useState(null);

  useEffect(() => {

    setValue(null)
    getDuration({}).then(res => {
      if (res.status === 200) {
        setList(res.data)
      } else {
        message.error(res.message).then()
      }
    })
  }, [])
  return (
    <Select
      showSearch
      filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
      allowClear
      value={value}
      autoClearSearchValue
      onChange={(e) => {
        onChange(e);
        setValue(e);
      }}
      placeholder={'请选择计费周期'}
    >
      {list.map((item) => (
        <Select.Option value={item.package_duration}>{item.package_duration + '/月'}</Select.Option>
      ))}
    </Select>
  );
};

export default SelectDuration;
